<template>
  <el-form label-width="110px" style="margin-top: 30px">
    <el-form-item label="机构名称:" :required="true">
      <el-input
        v-model="form.name"
        style="width: 220px"
        maxlength="20"
        show-word-limit
        class="input"
        placeholder="请输入名称"
      />
    </el-form-item>
    <el-form-item label="二级域名:" :required="true">
      <el-input
        v-model="form.domain"
        style="width: 220px"
        maxlength="20"
        show-word-limit
        class="input"
        placeholder="请输入名称"
      />
    </el-form-item>
    <el-form-item :required="true">
      <span slot="label">后台图标:<br>(32 X 32)</span>
      <uploader
        :width="64"
        :height="64"
        :oss="'orgInfo'"
        :url="form.icon"
        @callback="iconCallback"
      />
    </el-form-item>
    <el-form-item :required="true">
      <span slot="label">平台图标:<br>(220 X 45)</span>
      <uploader
        :width="220"
        :height="45"
        :oss="'orgInfo'"
        :url="form.logo"
        @callback="logoCallback"
      />
    </el-form-item>
    <el-form-item v-if="!form.id" label="创建日期:" :required="true">
      <el-date-picker
        v-model="form.createdAt"
        type="date"
        placeholder="选择日期"
        :disabled="true"
      />
    </el-form-item>
    <el-form-item label="到期时间:" :required="true">
      <el-date-picker
        v-model="form.expiration"
        :picker-options="options"
        type="date"
        placeholder="选择日期"
      />
      <div style="margin-top: 10px">
        <el-tag type="success" style="width: 110px">
          剩余 {{ Math.ceil((new Date(form.expiration).getTime() - Date.now()) /(24 * 3600 * 1000)) }} 天
        </el-tag>
        <el-checkbox v-model="checked" style="margin-left: 20px">编辑按钮</el-checkbox>
      </div>
      <div v-show="checked" style="margin-top: 10px">
        <el-radio-group v-model="model" size="mini" style="margin-right: 20px">
          <el-radio-button label="add">增加</el-radio-button>
          <el-radio-button label="sub">减少</el-radio-button>
        </el-radio-group>
        <el-button size="mini" @click="delay('day')">1天</el-button>
        <el-button size="mini" @click="delay('week')">1周</el-button>
        <el-button size="mini" @click="delay('month')">1月</el-button>
        <el-button size="mini" @click="delay('half')">半年</el-button>
        <el-button size="mini" @click="delay('year')">1年</el-button>
      </div>
    </el-form-item>
    <el-form-item label="管理账号:">
      <div style="width: 220px;height: 36px;margin-bottom: 10px">{{ form.account }}</div>
      <el-input
        v-model="password"
        style="width: 145px"
        class="input"
        placeholder="密码"
        :disabled="true"
      />
      <el-button @click="resetPwd">重置</el-button>
    </el-form-item>
    <el-button style="margin-left: 25px;width: 70px" @click="reset">还原</el-button>
    <el-button style="width: 220px" type="primary" @click="update">更新</el-button>
  </el-form>
</template>

<script>
import Uploader from '../course/module/Upload'
import { delayOrgExp, fetchOrgInfo, resetOrgPwd, updateOrg } from '../../api/org'
export default {
  name: 'OrgEdit',
  components: { Uploader },
  data() {
    return {
      checked: false,
      model: 'add',
      form: {
        id: null,
        name: '',
        domain: '',
        logo: '',
        icon: '',
        account: '',
        createdAt: null,
        expiration: null
      },
      password: '',
      copy: {},
      options: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  created() {
    this.orgInfo(this.$route.params.id)
  },
  methods: {
    reset() {
      this.form = JSON.parse(JSON.stringify(this.copy))
    },
    resetPwd() {
      this.password = Math.random().toString().slice(-6)
      resetOrgPwd(this.form.id, {
        password: this.password
      }).then(() => {
        this.$SUCCESS('重置密码成功')
      }).catch(err => {
        console.log(err)
      })
    },
    delay(type) {
      const id = this.$route.params.id
      delayOrgExp(id, {
        model: this.model,
        delay: type
      }).then(response => {
        this.form.expiration = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    orgInfo(id) {
      fetchOrgInfo(id).then(response => {
        this.form = response.data
        this.copy = JSON.parse(JSON.stringify(response.data.org))
      }).catch(err => {
        console.log(err)
      })
    },
    iconCallback(url) {
      this.form.icon = url
    },
    logoCallback(url) {
      this.form.logo = url
    },
    create() {

    },
    update() {
      updateOrg(
        this.$route.params.id,
        this.form
      ).then(() => {
        this.$SUCCESS('机构信息更新成功');
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
</style>
